<template>
  <div class="bookself">
    <header class="header">
      <div class="left">
        <div>书架</div>
        <van-icon class="icon" name="play" />
      </div>
      <div class="right">
        <van-icon class="icon" name="search" />
        <van-icon
          @click.stop="isShowHistory = true"
          class="icon"
          name="underway-o"
        />
        <van-icon class="icon" name="bars" />
      </div>
    </header>
    <section class="banner">
      <div class="banner-item" v-for="(banner, index) in banners" :key="index">
        <div
          class="img-box"
          :style="{ backgroundImage: `url(${banner.cover})` }"
        ></div>
        <div class="right">
          <div class="first">
            <div class="title">{{ banner.title }}</div>
            <div class="name-right">
              <div>{{ banner.readInfo }}</div>
              <van-icon class="icon" name="cross" />
            </div>
          </div>
          <div class="my-text description">{{ banner.description }}</div>
        </div>
      </div>
    </section>
    <section class="bookself-content">
      <BookSelfItem v-for="(book, index) in bookselfList"
        :key="index" :book="book" :changeStatus="changeStatus"/>
    </section>
    <transition name="componentTab">
      <HistoryComponent v-if="isShowHistory" @hideComponent="isShowHistory=false"/>
    </transition>
  </div>
</template>

<script>
import HistoryComponent from "@/components/bookself/HistoryComponent";
import BookSelfItem from '../components/bookself/BookSelfItem.vue';
export default {
  components: {
    HistoryComponent,
    BookSelfItem
  },
  data: () => {
    return {
      isShowHistory: false,
      banners: null,
      bookselfList: null,
      changeStatus:0
    };
  },
  methods: {
    getBookselfBanner() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/shelf/banner.json`,
      }).then((res) => {
        console.log(res);
        this.banners = res.data.data.banners;
      });
    },
  },
  activated() {
    this.bookselfList = JSON.parse(localStorage.getItem("bookselfList")) || [];
    this.changeStatus++;
    console.log(this.bookselfList);
  },
  created() {
    this.getBookselfBanner();
  },
};
</script>

<style lang="scss" scoped>
.bookself {
  width: 100%;
  height: calc(100vh - 0.5rem);
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .header {
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--bgc-white);
    z-index: 100;
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    border-bottom: 0.01rem solid var(--border-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.2rem;
    .icon {
      font-size: 0.2rem;
      color: var(--text-gray);
    }
    .left {
      display: flex;
      align-items: center;
      .icon {
        margin-left: 0.05rem;
        font-size: 0.12rem;
        color: var(--text-gray);
        transform-origin: 50% 50% 50%;
        transform: rotate(90deg);
      }
    }
    .right {
      display: flex;
      align-items: center;
      .icon {
        margin-left: 0.1rem;
      }
    }
  }
  .banner {
    margin-top: 0.1rem;
    width: 100%;
    .banner-item {
      margin: 0 auto;
      width: 3.4rem;
      height: 0.87rem;
      box-sizing: border-box;
      padding: 0.1rem;
      border-radius: 0.12rem;
      border: 0.01rem solid var(--border-gray);
      box-shadow: 0.05rem 0.05rem 0.1rem 0.025rem var(--bgc-gray);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img-box {
        width: 0.46rem;
        min-width: 0.46rem;
        aspect-ratio: 46/64;
      }
      .right {
        flex-grow: 1;
        margin-left: 0.1rem;
        font-size: 0.13rem;
        .first {
          margin-bottom: 0.05rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-weight: bold;
            color: var(--text-black);
          }
          .name-right {
            display: flex;
            align-items: center;
            color: var(--text-red);
            .icon {
              font-size: 0.16rem;
              color: var(--text-gray2);
              margin: 0 0.05rem;
            }
          }
        }
        .description {
          -webkit-line-clamp: 2;
          color: var(--text-gray);
        }
      }
    }
  }
  .bookself-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.13rem;
    color: var(--text-black);
    >div{
      margin-right: 0.34rem;
      &:nth-child(3n){
        margin-right: 0;
      }
    }
  }
}
</style>